<template>
    <div class="Cart">
        <!-- 这是购物车 -->
        <!-- 导航面包屑 -->
        <div class="nav">
            <a-breadcrumb style="color: #003150">
                <a-breadcrumb-item><router-link to="/index" style="color: #003150">主页</router-link></a-breadcrumb-item>
                <a-breadcrumb-item style="color: #003150">购物袋</a-breadcrumb-item>
            </a-breadcrumb>
        </div>
        <hr>
        <div class="goods">
            <div class="goods-title">
                <h1>我的购物车({{allNum}})</h1>
                <span>安全购物保障</span>
            </div>
            <div class="goods-list">
                <a-row type="flex" justify="space-between" class='goods-list-centent'>
                    <!-- 左边的商品列表 -->
      	        	<a-col :xs="24" :sm="24" :md="15" :lg="15" :xl="15" class="goods-list-left">
                        <div class='goods-list-left-top'>
                            <div class="goods-list-left-sum">
                                <h2>{{allNum}}腕表</h2>
                            </div>
                            <div>
                                <ul>
                                    <li v-for="item in cartProducts" :key="item.id">
                                        <a-row type="flex" justify="end">
                                            <a-col :xs="10" :sm="10" :md="7" :lg="7" :xl="7" class="list-img">
                                                <a-checkbox :checked="item.checked" @change="upChecked(item.id)"></a-checkbox>
                                                <img :src="item.s_good.s_goods_photos[0].path" alt="">
                                            </a-col>
                                            <a-col :xs="14" :sm="14" :md="17" :lg="17" :xl="17" class="list-right">
                                                <div class="list-right1">
                                                    <div>
                                                        <span>{{item.series}}</span>
                                                        <span>{{item.s_good.name}}</span>
                                                    </div>
                                                    <a-icon type="close" @click="DelCartGoods(item.id)" />
                                                </div>
                                                <div class="list-right2"> 
                                                    <div>
                                                        <span>数量</span>
                                                        <a-input-number 
                                                            id="inputNumber"
                                                            :min="1" 
                                                            :max="999" 
                                                            :default-value="1" 
                                                            v-model="item.num"
                                                            @change="upGoodsNum(item)" 
                                                        />
                                                    </div>
                                                    <div>
                                                        <span>价格</span>
                                                        <span>{{item.s_good.price | demoMoney}}</span>
                                                    </div>
                                                    <div>
                                                        <span>小计</span>
                                                        <span>{{item.totalPrice | demoMoney}}</span>
                                                    </div>
                                                </div>
                                            </a-col>
                                        </a-row>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="goods-list-left-bottom">
                            <div>
                                <p>有优惠码？请在此输入</p>
                                <input type="text">
                                <button>加入</button>
                            </div>
                            <button class="payment" @click="payment">
                                <span>结算支付</span>
                                <span class="iconfont icon--_jiantou"></span>
                            </button>
                        </div>
      	        	</a-col>
                    <!-- 右边的详情 -->
      	        	<a-col :xs="24" :sm="24" :md="9" :lg="9" :xl="9" class="goods-list-right">
      	        	  	<div>
                            <h2>订单详情</h2>
                            <div class="details">
                                <div><span>小计</span><span>{{allPrice | demoMoney}}</span></div>
                                <div><span>配送</span><span>免费</span></div>
                                <div><span>总计</span><span>{{allPrice | demoMoney}}</span></div>
                            </div>
                            <h3>免费送货</h3>
                            <p>免费，快速，安全配送</p>
                            <h3>电子发票</h3>
                            <p>浪琴使用电子发票。您可以参阅使用说明，在包裹内获得您的电子发票提取码，然后获取您的电子发票。</p>
                            <h3>帮助</h3>
                            <p>400-821-3270</p>
                            <h3>安全付款</h3>
                            <p>支付方式</p>
                            <div class="payment">
                                <span class="iconfont icon-ai-pay-copy"></span>
                                <span class="iconfont icon-zhifubao"></span>
                                <span class="iconfont icon-wxpay"></span>
                            </div>
                        </div>
      	        	</a-col>
    	        </a-row>
            </div>
        </div>
    </div>
</template>

<script>
import {delCart, upCart} from '../assets/js/request.js'
import {mapMutations, mapState, mapGetters, mapActions} from 'vuex'
export default {
    filters:{
        demoMoney(value) {
            return '￥' + value.toLocaleString() + ".00"
        }
    },
    created() {
        // 刷新获取购物车的商品并筛选
        if (this.$Cookie.get('user')) {
            this.getCartArr()
        }
    },
    data() {
        return {

        }
    },
    methods: {
        ...mapActions('cart', ['getCartArr']),
        ...mapActions('order', ['addOrder', "getOrder"]),
        ...mapMutations('cart', ["DelGoods","UpChecked"]),    
        ...mapMutations("order", ['assignment']),
        // 商品数量改变的回调函数
        async upGoodsNum(data) {
            await upCart(data)
            this.getCartArr()
        },
        async DelCartGoods(id) {
            // 确认框中用到的当前作用域this需要提前替换为局部变量，否则浏览器会提示无法获取该属性。
            let self = this
            this.$confirm({
                title: '您确定要从购物袋中移除此商品吗？',
                okText: '确认',
                cancelText: '取消',
                async onOk() {
                    // 删除后台购物车的对应商品
                    await delCart(id)
                    .then(() => {
                        // 删除vuex里商品
                        self.DelGoods(id)
                        self.$message.success('删除成功');
                    })
                    .catch(() => {
                        self.$message.error('删除失败');
                    })
                },
                onCancel() {},
            });
        },

        // 多选是否选中的回调,改变商品的checked
        upChecked(id) {
            this.UpChecked(id)
        },

        // 结算添加订单请求
        async payment() {
            // 筛选出购物车里选中的商品
            let checkedArr = this.cartProducts.filter(item => {
                if(item.checked) {
                    return item
                }
            })
            if(checkedArr.length) {
                // 没有收获地址的情况
                if(!this.cityAddressArr.length) {
                    // console.log(checkedArr)
                    // 存储临时订单信息到浏览器缓存
                    sessionStorage.setItem('temporary', JSON.stringify(checkedArr))
                    // 添加成功后，删除选中的商品
                    checkedArr.forEach(item => {
                        delCart(item.id);
                        this.DelGoods(item.id);
                    })
                    this.$router.push('/order/0')
                    return
                }
                // 添加订单的goods_info参数
                let goods_infoArr = []
                checkedArr.forEach(item => {
                    let obj = {}
                    obj.id = item.goods_id
                    obj.num = item.num
                    goods_infoArr.push(obj)
                })
                // console.log(goods_infoArr)
                // 添加订单要传的参数对象
                let addOrderObj = {}
                addOrderObj.goods_info = goods_infoArr
                addOrderObj.addr_id = this.cityAddressArr[0].id
                // console.log(this.cityAddressArr)
                await this.addOrder(addOrderObj)
                .then((res) => {
                    // 添加成功后，删除选中的商品
                    console.log(checkedArr)
                    checkedArr.forEach(item => {
                        delCart(item.id);
                        this.DelGoods(item.id);
                    })
                    // 添加成功后，再获取下订单列表
                    console.log(res)
                    let order_id = res.order_id
                    console.log(order_id)
                    this.$router.push(`/order/${res.id}`)
                    this.getOrder({project_id: 18, limit:100 })
                })
                .catch((err) => {
                    console.log(添加失败)
                })
            } else {
                this.$message.error('至少选择1个商品');
            }
            
        }
    },
    computed: {
        ...mapState('cart', ['cartProducts']),
        ...mapState('address', ['cityAddressArr']),
        ...mapGetters('cart', ["allPrice",'allNum'])
    },
}
</script>

<style lang="scss" scoped>
    .Cart {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #f0f1f3;
        text-align: left;
        // 顶部导航条
        .nav {
            width: 90%;
            padding: 19px 0;
        }
        hr {
            color: #84888B;
        }
        // 购物车的内容
        .goods {
            width: 90%;
            // 商品数量标题
            .goods-title {
                padding: 0 0 32px 0;
                h1 {
                    font-size: 40px;
                    color: #003150;
                    font-weight: 400;
                }
                span {
                    font-size: 12px;
                    margin: 15px 0 0;
                }
            }
            // 商品列表
            .goods-list {
                padding: 50px 0 0;
                .goods-list-centent {
                    // 左边的商品列表
                    .goods-list-left {
                        padding: 0 30px 0 0;
                        border-right: 1px solid #e3e4e6;
                        .goods-list-left-top {
                            background: white;
                            .goods-list-left-sum {
                                border-bottom: 1px solid #e3e4e6;
                                h2 {
                                    color: #003150;
                                    font-size: 24px;
                                    font-weight: 400;
                                    padding: 20px 0 10px 60px;
                                }
                            }
                            // 商品列表详情
                            div {
                                ul {
                                    width: 90%;
                                    margin: 0 auto;
                                    li {
                                        border-bottom: 1px solid #e3e4e6;
                                        .list-img {
                                            padding: 20px 0;
                                            img {
                                                width: 100%;
                                            }
                                        }
                                        .list-right {
                                            padding: 45px 0px 30px 10px;
                                            .list-right1 {
                                                display: flex;
                                                justify-content: space-between;
                                                div {
                                                    display: flex;
                                                    flex-direction: column;
                                                    justify-content: space-between;
                                                    span {
                                                        font-size: 14px;
                                                        color: #84888B;
                                                        margin: 0 0 4px;
                                                    }
                                                }
                                            }
                                            .list-right2 {
                                                margin: 60px 0px 5px;
                                                display: flex;
                                                justify-content: space-between;
                                                div {
                                                    display: flex;
                                                    flex-direction: column;
                                                    span:first-child {
                                                        font-size: 12px;
                                                        margin: 0 0 7px;
                                                        color: #84888B;
                                                    }
                                                    span:last-child {
                                                        font-size: 13px;

                                                        color: #003150;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        // 商品优惠码和支付
                        .goods-list-left-bottom {
                            margin: 40px 0;
                            display: flex;
                            justify-content: space-between;
                            @media (max-width: 1250px) {
                                flex-direction: column;
                                align-items: center;
                            }
                            div {
                                p {
                                    font-size: 13px;
                                    color: #84888B;
                                    margin: 0 0 10px;
                                }
                                input {
                                    width: 180px;
                                    height: 50px;
                                    padding: 8px 20px;
                                    margin-right: 15px;
                                    border-style: none;
                                    border: 1px solid #003150;
                                }
                                button {
                                    width:80px;
                                    height: 50px;
                                    background: #003150;
                                    color: white;
                                    padding: 5px 20px;
                                    &:hover {
                                        color: #003150;
                                        background: white;
                                        border: 1px solid #003150;
                                    }
                                }
                            }
                            .payment {
                                font-size: 14px;
                                width: 268px;
                                height: 70px;
                                background: #003150;
                                color: white;
                                padding: 15px 20px;
                                margin-top: 20px;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                &:hover {
                                    color: #003150;
                                    background: white;
                                    border: 1px solid #003150;
                                }
                                .iconfont {
                                    font-size: 20px;
                                }
                            }
                        }
                    }
                    // 右边的商品详情确认
                    .goods-list-right {
                        padding: 0 0 0 20px;
                        color: #84888B;
                        div {
                            h2 {
                                font-size: 26px;
                                font-weight: 600;
                                margin: 5px 0 66px;
                                color: #003150;
                            }
                            .details {
                                padding: 0 40px 0 20px;
                                div {
                                    font-size: 15px;
                                    display: flex;
                                    justify-content: space-between;
                                    margin: 10px 0;
                                    span:last-child {
                                        font-weight: 700;
                                        color: #003150;
                                    }
                                }
                                div:last-child {
                                    span {
                                        font-size: 20px;
                                    }
                                }
                            }
                            h3 {
                                font-size: 17px;
                                font-weight: 600;
                                color: #84888B;
                                margin: 45px 0 10px;
                            }
                            p {
                                font-size: 13px;
                                margin: 0 0 10px;
                            }
                            .payment {
                                span {
                                    font-size: 25px;
                                    padding: 12px 45px 0 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>